<template>
  <div>
    <!--工具条-->
    <el-col
      :span="24"
      class="toolbar"
      style="padding-bottom: 0px;display: flex; justify-content: space-between"
    >
      <el-form :inline="true">
        <el-select
          v-model="ustrpostitionParameter.type"
          :placeholder="$t('iptdefault.status')"
        >
          <el-option
            v-for="item in optionstionSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-form-item>
          <el-button type="primary" @click="usertionSelect">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="userStatusRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

      <excelexport></excelexport>
    </el-col>

    <!--列表-->

    <el-table
      v-loading="loading"
      :data="userPositionData"
      style="width: 100%"
      id="out-table"
    >
      <el-table-column prop="userId" :label="$t('field.userid')"> </el-table-column>
      <el-table-column prop="username" :label="$t('field.cellphone')"> </el-table-column>
      <el-table-column prop="name" :label="$t('field.upusername')"> </el-table-column>



      <el-table-column prop="crypto" :label="$t('field.digitalcurrencys')">
      </el-table-column>

      <el-table-column prop="amount" :label="$t('field.totalbalance')" >
        <template slot-scope="props">
          {{ (props.row.amount / million).toFixed(8) }}
        </template>
      </el-table-column>

      <el-table-column prop="amount" :label="$t('field.dollarequivalent')" >
      <template slot-scope="props">
        {{ 
          websocketDataps[props.row.crypto.replace("_V1","")+'USDT']?
          (websocketDataps[props.row.crypto.replace("_V1","")+'USDT']['a'] * (props.row.amount / million).toFixed(8)).toFixed(2)
          : (props.row.amount / million).toFixed(2)
          
           }}
      </template>
    </el-table-column>

          <el-table-column  :label="$t('field.upbalance')">
        <template slot-scope="props">
          {{ ((props.row.amount - props.row.lockAmount ) / million).toFixed(8) }}
        </template>
      </el-table-column>

        <el-table-column prop="amount" :label="$t('field.dollarequivalent')">
      <template slot-scope="props">
        {{ 
          websocketDataps[props.row.crypto.replace("_V1","")+'USDT']?
          (websocketDataps[props.row.crypto.replace("_V1","")+'USDT']['a'] *  ((props.row.amount - props.row.lockAmount ) / million).toFixed(8)).toFixed(2)
          :  ((props.row.amount - props.row.lockAmount ) / million).toFixed(2)
          
           }}
      </template>
    </el-table-column>
      
         <el-table-column prop="lockAmount"  :label="$t('field.lockAmount')" >
        <template slot-scope="props">
          {{ (props.row.lockAmount / million).toFixed(8) }}
        </template>
      </el-table-column>



      <el-table-column prop="type:" :label="$t('field.wallettype')">
        <template slot-scope="props">
          {{
            props.row.type == 1
              ? $t('field.appWallet')
              : props.row.type == 2
              ? $t('field.otcWallet')
              : ""
          }}
        </template>
      </el-table-column>

      
      
    </el-table>
  </div>
</template>

<script>
import excelexport from "@/components/export.vue";
import { getUserRequest, postUserRequest, getNudataRequest } from "@/api/api";
export default {
  name: "userposition",
  components: {
    excelexport,
  },



  data() {
    return {
      // optionstionSelect: [
      //   {
      //     value: 1,
      //     label: "app 钱包",
      //   },
      //   {
      //     value: 2,
      //     label: "OTC 钱包",
      //   },
      // ],
      
      million: 100000000,
      loading: true,
      userPositionData: null,
      ustrpostitionParameter: {
        type: 1,
      },
    };
  },
  computed:{
    optionstionSelect:function(){
      return [
        {
          value: 1,
          label: this.$t('field.appWallet'),
        },
        {
          value: 2,
          label:  this.$t('field.otcWallet'),
        },
      ]
    },
      websocketDataps(){
          return this.$store.state.websocketDataps
      },
  },
  methods: {
    usertionSelect() {
      this.getUstrpostitionData();
    },
    userStatusRefresh(){
     this.getUstrpostitionData()
    },

    getUstrpostitionData() {
     this.loading= true

      getUserRequest(this.ustrpostitionParameter, "/getPosition").then(
        (res) => {
          var data = res.data;
          this.loading = false;
          if (data.code == 200) {
            this.userPositionData = data.data;
          } else {
            this.$message({
              message: data.message,
              type: "error",
            });
          }
     this.loading= false

        });
    },
  },
  mounted() {
    this.getUstrpostitionData();
  },
};
</script>

<style>
</style>